<template>
  <MainSlot v-loading="loading">
    <template v-slot:searchForm>
      <SearchForm :formItemList="formItemList" @search="search"></SearchForm>
    </template>
    <template v-slot:btn>
      <BtnSlot :btnList="btnList" @handleEvent="getBtnEvent"></BtnSlot>
    </template>
    <template v-slot:table>
      <TableData :isSelect="true" :tableThead="tableThead" :dataList="dataList" :loading="loading"
        @selection-change="selectionChange">
        <template v-slot:stordocName="{ row }">
          <span>{{
            row.stordoc ? row.stordoc.stordocName || "--" : "--"
            }}</span>
        </template>
        <template v-slot:details="{ row }">
          <el-button type="text" @click="lookView(row)">查看详情</el-button>
        </template>
        <template v-slot:addDetails="{ row }">
          <el-button type="text" @click="addDetailsInfo(row)">添加详情</el-button>
        </template>
        <template v-slot:dcountDate="{ row }">
          <span>{{ row.dcountDate.split(" ")[0] }}</span>
        </template>
      </TableData>
    </template>
    <template v-slot:dialogModule>
      <AddEdit :title="'添加盘点'" @closeDialog="closeDialog" :addEditFlag="addEditFlag"
        :dialogVisible="dialogVisibleAddEdit" :data="formData" />
      <AddDetailsInfo :title="'添加盘点详情'" @closeDialog="closeDialog" :materialList="materialList"
        :dialogVisible="dialogVisibleAddDetailsInfo" :data="detailsInfo" />
      <el-dialog :close-on-click-modal="false" title="盘点详情" :visible.sync="dialogVisible" width="60%"
        :before-close="handleClose">
        <div class="info" v-for="(item, index) in invcountDetailList" :key="index">
          <div class="label">物料：{{ item.material.materialName }}</div>
          <div class="invcountDetailInfo">
            <div class="item">
              <span class="name">行号:</span>
              <span>{{ item.batchNo || "--" }}</span>
            </div>
            <div class="item">
              <span class="name">批号:</span>
              <span>{{ item.batchFile.lotNumber || "--" }}</span>
            </div>
            <div class="item">
              <span class="name">生产日期:</span>
              <span>{{ item.batchFile.produceDate || "--" }}</span>
            </div>
            <div class="item">
              <span class="name">失效日期:</span>
              <span>{{ item.batchFile.expirationDate || "--" }}</span>
            </div>
            <div class="item">
              <span class="name">数量:</span>
              <span>{{ item.num || "--" }}{{ item.castUnit.unitName }}</span>
            </div>
            <div class="item">
              <span class="name">换算率:</span>
              <span>{{ item.changerate || "--" }}</span>
            </div>
            <div class="item">
              <span class="name">账面数量:</span>
              <span>{{ item.nonhandastNum || "--"
                }}{{ item.castUnit.unitName }}</span>
            </div>
            <div class="item">
              <span class="name">盘点数量:</span>
              <span>{{ item.ncountastNum || "--"
                }}{{ item.castUnit.unitName }}</span>
            </div>
            <div class="item">
              <span class="name">原因:</span>
              <span>{{ item.reason || "--" }}</span>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </template>
    <template v-slot:pagination>
      <Pagination  @size-Change="handleSizeChange" :size="size"  @current-change="handleCurrentChange" :page="page" :total="total">
      </Pagination>
    </template>
  </MainSlot>
</template>
<script>
import store from '@/store'
import MainSlot from "@/components/MainSlot";
import SearchForm from "@/components/SearchForm";
import TableData from "@/components/TableData";
import Pagination from "@/components/Pagination";
import warehouseManage from "@/api/digtalOperation/warehouseManage";
import BtnSlot from "@/components/BtnSlot";
import AddEdit from "./components/addEdit";
import AddDetailsInfo from "./components/addDetailsInfo";
export default {
  components: {
    MainSlot,
    SearchForm,
    TableData,
    Pagination,
    BtnSlot,
    AddEdit,
    AddDetailsInfo,
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      dialogVisibleAddEdit: false,
      dialogVisibleAddDetailsInfo: false,
      addEditFlag: "add",
      btnList: ["add", "delete"],
      formData: {},
      detailsInfo: {},
      searchFormData: {},
      page: 1,
      size:10,
      total: 10,
      dataList: [],
      invcountDetailList: [],
      selectDataList: [],
      materialList: [],
      tableThead: [
        {
          isShow: true,
          label: "仓库",
          slotName: "stordocName",
          minWidth: "120px",
        },
        {
          isShow: true,
          label: "仓库管员",
          prop: "cwhsmanagerName",
          minWidth: "120px",
        },
        {
          isShow: true,
          label: "盘点人",
          prop: "countoperatorName",
          minWidth: "120px",
        },
        {
          isShow: true,
          label: "盘点日期",
          slotName: "dcountDate",
          minWidth: "120px",
        },
        { isShow: true, label: "详情", slotName: "details", minWidth: "120px" },
        {
          isShow: true,
          label: "添加详情",
          slotName: "addDetails",
          minWidth: "120px",
        },
      ],
      formItemList: [
        {
          label: "仓库",
          type: "select",
          selectOptions: this.setOptions("stordocNo"),
          param: "stordocNo",
          defaultSelect: "",
          multiple: false,
          isShow: true,
        },

        {
          label: "仓库管员",
          type: "select",
          selectOptions: this.setOptions("cwhsmanagerName"),
          param: "cwhsmanagerName",
          defaultSelect: "",
          multiple: false,
          isShow: true,
        },
        {
          label: "盘点人",
          type: "select",
          selectOptions: this.setOptions("cwhsmanagerName"),
          param: "countoperatorName",
          defaultSelect: "",
          multiple: false,
          isShow: true,
        },
      ],
    };
  },
  computed: {
    person() {
      return this.$store.state.initData.person || [];
    },
  },
  mounted() {
    this.queryPageByCondition();
    store.dispatch('initData/queryStordoc');
  },
  methods: {
    setOptions(param) {
      let options = [];
      if (param == "stordocNo") {
        this.$store.state.initData.stordoc.forEach((item) => {
          options.push({ text: item.stordocName, value: item.stordocNo });
        });
      } else if (param == "cwhsmanagerName") {
        this.$store.state.initData.person.forEach((item) => {
          options.push({ text: item.person.name, value: item.person.name });
        });
      }
      return options;
    },

    //获取选中Btn
    getBtnEvent(flag) {
      console.log(flag);
      if (flag == "add") {
        this.dialogVisibleAddEdit = true;
      } else if (flag == "delete") {
        if (this.selectDataList.length > 0) {
          this.delList(this.selectDataList);
        } else {
          this.$message.warning("请先选择表单数据项后再删除！");
        }
      }
      this.addEditFlag = flag;
    },
    lookView(row) {
      let params = {
        invcountNo: row.invcountNo,
      };
      warehouseManage
        .invcountDetail(params)
        .then((res) => {
          console.log(res);
          let { data } = res;
          this.invcountDetailList = data || [];
          this.dialogVisible = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    addDetailsInfo(row) {
      this.detailsInfo = JSON.parse(JSON.stringify(row));
      warehouseManage
        .queryMaterialByStordocNo(row.stordocNo)
        .then((res) => {
          console.log(res);
          if ((res.code = 1)) {
            this.materialList = res.data || [];
            this.dialogVisibleAddDetailsInfo = true;
          } else {
            this.$message.warning("查询仓库物料失败!");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    search(data) {
      console.log(data);
      this.page = 1;
      this.searchFormData = { ...data };
      this.queryPageByCondition();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.queryPageByCondition();
    },
    handleSizeChange(size){
      this.size = size;
      this.queryPageByCondition();
    },
    queryPageByCondition() {
      let params = {
        page: this.page,
        size: this.size,
        entity: { ...this.searchFormData },
      };
      warehouseManage
        .queryPageByCondition(params)
        .then((res) => {
          console.log(res);
          let { data } = res;
          this.dataList = data.content || [];
          this.total = data.totalElements;
        })
        .catch((err) => { });
    },
    delList(list) {
      let noList = [];
      list.forEach((item) => {
        noList.push(item.invcountNo);
      });
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          warehouseManage
            .delList(noList)
            .then((res) => {
              if (res.code == 1) {
                this.$message.success("删除成功");
                this.queryPageByCondition();
              } else {
                this.$message.warning("删除失败");
              }
            })
            .catch((err) => {
              this.$message.warning("删除失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    selectionChange(data) {
      this.selectDataList = data;
    },
    //关闭弹窗
    closeDialog() {
      this.dialogVisibleAddEdit = false;
      this.dialogVisibleAddDetailsInfo = false;
      this.queryPageByCondition();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
  },
};
</script>
<style lang="scss" scoped>
.info {
  box-shadow: 0 0 10px 10px #dddddd5d;
  padding: 15px;
  border-radius: 8px;
  transition: all 0.2s;

  &:hover {
    box-shadow: 0 0 10px 10px #dddddd9f;
  }

  .label {
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    border-bottom: 1px solid #f0f0f0;
  }

  .invcountDetailInfo {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .item {
      width: calc(100% / 3);
      padding-bottom: 10px;
      color: #333333;

      .name {
        color: #333333;
        font-weight: bold;
      }
    }
  }
}
</style>